<script setup>
import {ref, onMounted, watch, onUnmounted} from "vue";
import {RequestListJobs,RequestQueryHunyuanModelJob} from "@/api/Hunyuan.js"
import {ElMessage} from "element-plus";
import JobCard from "@/components/JobCard/JobCard.vue";

// 任务列表
const jobList = ref([]);

// 获取任务列表
async function getJobList(){
  try{
    const res = await RequestListJobs();
    if(res.data.code === 200){
      // ElMessage.success("获取任务列表成功");
      jobList.value = res.data.data;
      // 解析text
      jobList.value.forEach(item => {
        if(item.imageGen){
          item.textObject = JSON.parse(item.text);
        }
      });

      // 初始化轮询队列
      updatePollingQueue();

      // 立即轮询一个任务
      pollOneJob();

      // 启动轮询：每秒最多请求一个任务
      pollInterval = setInterval(pollOneJob, 10000);
    }else{
      ElMessage.error("获取任务列表失败:"+res.data.message);
    }
  }catch (e) {
    console.log("获取任务列表出错",e);
    ElMessage.error("获取任务列表出错"+e);
  }
}

// 轮询队列：保存需要轮询的任务索引
const pollingQueue = ref([]);

// 更新轮询队列：所有 status !== 5 的任务加入队列
function updatePollingQueue() {
  pollingQueue.value = jobList.value
      .map((job, index) => ({ ...job, index }))
      .filter(job => job.status !== 5)
      .map(job => job.index); // 只保留 index
}

// 轮询函数：每秒最多执行一次，处理队列中的一个任务
async function pollOneJob() {
  if (pollingQueue.value.length === 0) return;

  // 取出第一个任务索引
  const jobIndex = pollingQueue.value.shift(); // 先进先出
  const jobId = jobList.value[jobIndex]?.id;

  if (!jobId) return;

  try {
    const res = await RequestQueryHunyuanModelJob(jobId);
    if (res.data.code === 200) {
      const newJob = res.data.data;
      if(newJob.imageGen){
        newJob.textObject = JSON.parse(newJob.text);
      }
      // 更新任务数据
      jobList.value[jobIndex] = newJob;

      // 如果更新后状态仍不是 5，重新加入队列尾部
      if (res.data.data.status !== 5) {
        pollingQueue.value.push(jobIndex);
      }
    } else {
      // 查询失败，可选择重试或放弃
      console.warn(`查询任务 ${jobId} 失败:`, res.data.message);
      pollingQueue.value.push(jobIndex); // 可选：失败也重试
    }
  } catch (e) {
    console.error("查询任务状态出错:", e);
    pollingQueue.value.push(jobIndex); // 失败也重试
  }
}

// 每秒执行一次 pollOneJob
let pollInterval = null;

// 立即更新轮询队列
updatePollingQueue();

// 模型被删除
function modelDeleted(modelId){
  console.log("模型被删除",modelId);
  // 移除掉jobList中的数据
  jobList.value = jobList.value.filter(job => job.id !== modelId);
}


// 可选：组件卸载时清除定时器
onUnmounted(() => {
  if (pollInterval) {
    clearInterval(pollInterval);
  }
});

//  挂载时
onMounted(()=>{
  // 获取任务列表
  getJobList();
});

// 重试模型生成任务
function retryGen3DModel(modelId){
  console.log("重试模型生成任务",modelId);
  jobList.value.forEach(item => {
    if(item.id === modelId){
      console.log("重试模型生成任务",item);
      item.status = 1;
      // 立即更新轮询队列
      updatePollingQueue();
    }
  });

}


</script>

<template>
  <div>

  </div>
  <!--模型展示图片-->
  <div class="jobLists" v-if="jobList.length > 0">
    <div class="card" v-for="item in jobList" :key="item.id">
      <JobCard :job-data="item" @onDelete="modelDeleted" @retryJob="retryGen3DModel"></JobCard>
    </div>
  </div>
  <div v-else style="margin-top: 100px;">
    <el-empty description="还没有提交生成呢，快去提交生成任务吧" />
  </div>

</template>

<style scoped>
.jobLists {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px; /* 卡片之间的间距 */
  padding: 10px;
  box-sizing: border-box;
}
</style>
